.userTemplate {
    padding: 0 16px;
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 1;

    &>.mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: var(--blurColor);
        backdrop-filter: blur(calc(var(--blurFilter) * 1px));
        z-index: -1;
    }

    .Avatar {
        margin-right: 8px;
        background: var(--avatarBackColor);
        color: var(--avatarTextColor);
        font-weight: var(--avatarTextWeight);
        font-family: var(--avatarTextFamily);
    }

    .role {
        font-size: calc(var(--roleSize) * 1px);
        color: var(--roleColor);
        font-weight: var(--roleWeight);
        font-family: var(--roleFamily);
    }

    .name {
        font-size: calc(var(--userSize) * 1px);
        color: var(--userColor);
        font-weight: var(--userWeight);
        font-family: var(--userFamily);
    }

    &.UserA01 {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;

        &>div {
            flex: 1;
            overflow: hidden;

            &>.role {
                height: 16px;
                line-height: 16px;
                font-size: 16px;
                font-family: ShuHeiTi;
            }

            &>.name {
                height: 24px;
                line-height: 24px;
                font-size: 24px;
                width: 100%;
                font-family: ShuHeiTi;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
}